<template>
  <!--柱状图-->
    <div style="width: 100%; height: 100%" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts";
import request from "@/utils/request";

export default {
    name: "ColumnChart",
    data() {
        return {
            xAxis: [],
            chart: null
        };

    },
    mounted() {
        this.getData();
        window.addEventListener("resize", this.resizeChart);
    },
    methods: {
        resizeChart() {
            this.chart.resize();
        },
        async getData() {
            try {
                const response = await request.get("/views/topBorrowedBooks");
                const data = response.data;
                const counts = data.map((item) => item.borrowCount);
                const books = data.map((item) => item.name);
                this.echartsInit(books, counts);
            } catch (error) {
                console.log(error);
            }
        },
        echartsInit(books, counts) {
            this.chart = echarts.init(this.$refs.chart, null, {
                responsive: true,
            });
            this.chart.setOption({
                title: {
                    text: "图书借阅top5",
                    textStyle: {
                        color: "#fff",
                    },
                    left: "center",
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                yAxis: [{
                    type: "category",
                    inverse: true,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        margin: 30,
                        fontSize: 14,
                        align: 'left',
                        padding: [3, 0, 0, 0],
                        color: '#000',
                        rich: {
                            label: {
                                color: '#000',
                                fontSize: 14
                            },
                            bt: {
                                color: '#fff',
                                backgroundColor: 'rgba(255,85,127,1)',
                                width: 20,
                                height: 18,
                                align: 'center',
                                borderRadius: 50,
                                lineHeight: '5',
                                padding: [2, 0, 0, 0]
                            }
                        },
                        formatter: function (value, index) {
                            return '{bt|' + (index + 1) + '}';
                        }
                    }
                }, {  // 条状标题
                    type: 'category',
                    inverse: true,
                    offset: -30,
                    position: 'left',
                    axisTick: 'none',
                    axisLine: 'none',
                    show: true,
                    axisLabel: {
                        interval: 0,
                        color: ['#666'],
                        align: 'left',
                        verticalAlign: 'bottom',
                        lineHeight: 42,
                        fontSize: 14,
                    },
                    data: books,
                },
                ],
                xAxis: {
                    type: "value",
                    name: "",
                    splitLine: {show: false,},
                    axisLabel: {show: false,},
                    axisTick: {show: false,},
                    axisLine: {show: false,},
                },
                series: [
                    {
                        name: "借阅次数",
                        data: counts,
                        type: "bar",
                        barWidth: 15,
                        align: 'center',
                        itemStyle: {
                            color: 'rgba(200,200,200,.3)',
                            normal: {
                                color: 'rgba(255,170,0,1)',
                                barBorderRadius: 10,
                            },
                        },
                        label:{
                            show:true,
                            fontSize: 14,
                            color: '#fff',
                            textBorderWidth: 2,
                            padding: [2,0,0,0],
                        }
                    },
                ],
            });
        },
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.resizeChart);
    },
};
</script>

<style scoped>
</style>
